<template>
  <div class="container">

    <!--未登录布局-->
    <div v-if="!userState">

      <div class="login-btn" @click="this.$router.push('/login')">
        <span>注册/登录</span>
      </div>
    </div>



    <div v-else class="mycontainer">

      <div class="header not-login">
        <div class="login-btn" @click="this.$router.push('login')"></div>
      </div>

      <!--登录后的布局--->
      <div class="header user-info">
        <div class="base-info">
          <div class="left">
            <van-image fit="cover" class="avatar" round position="left"
              :src="`${appserverurl}`+userInfo.photo"
              
               />
<!-- src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" -->

            <span class="name">{{ userInfo.userName }}</span>
          </div>
          <div class="right">
            <van-button size="mini" round>编辑资料</van-button>
          </div>
        </div>

        <div class="data-stats">
          <div class="data-item">
            <span class="count">{{ userInfo.art_count }}</span>
            <span class="text">头条</span>
          </div>

          <div class="data-item">
            <span class="count">{{ userInfo.follow_count }}</span>
            <span class="text">关注</span>
          </div>

          <div class="data-item">
            <span class="count">{{ userInfo.fans_count }}</span>
            <span class="text">粉丝</span>
          </div>
          <div class="data-item">
            <span class="count">{{ userInfo.like_count }}</span>
            <span class="text">获赞</span>
          </div>

        </div>



      </div>



      <!--导航-->
      <van-grid column-num="2" clickable>
        <van-grid-item icon="star-o" text="收藏" />
        <van-grid-item icon="clock-o" text="历史" />

      </van-grid>
      <!--消息通知与退出登录布局-->

      <van-cell title="消息通知" is-link />
      <van-cell title="小智同学" is-link />

      <van-cell title="退出登录" class="logout-cell" v-if="userState" @click="onLogout" />


    </div>



  </div>
</template>  
    
<script>
import { ref, onMounted, reactive, toRefs } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import { showConfirmDialog } from 'vant';
import 'vant/es/dialog/style';
import { getUserInfo } from '../../api/user';

function useLogout(store) {
  const onLogout = () => {


    showConfirmDialog({
      title: '确定退出登录!',
     // message: '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
    })
      .then(() => {
        // on confirm
        console.log("退出登录");
        store.commit("setUser", null);  

      })
      .catch(() => {
        // on cancel
        console.log("取消退出登录");
      });




  
  }
  return { onLogout }
}
function useLoadUserInfo() {

  const state = reactive({
    userInfo: {
      userName: '',
      art_count: 0,
      follow_count: 0,
      fans_count: 0,
      like_count: 0,
      photo: ""
    }
  });
  const store = useStore();
  const appserverurl=import.meta.env.VITE_APP_URL;
  const userState = computed(() => store.state.user);


  const loadUserInfo = () => {
    if (userState.value !== null) {
      getUserInfo(userState.value.data.id).then((res) => {
        console.log(res.data.data.user);
        state.userInfo = res.data.data.user;
      });
    } 

  }

  onMounted(() => {
    loadUserInfo();
  });

  return {
    store, userState, state,appserverurl
  }

}


export default {
  setup() {
    const { store, userState, state, appserverurl } = useLoadUserInfo();
    console.log("my setup 88", userState);

    return {
      ...toRefs(state),
      userState,
      ...useLogout(store),
      appserverurl,

    }
  }

};
</script>  
    
<style> 
.mycontainer{width: 100vw;}
 .login-btn {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #6882f5;
    color: #fff;
  }

  .logout-cell {
    text-align: center;
    color: #d86262;
    height: 120px;
    margin-top: 9px;
  }

  .header {
    /* height: 261px;
    background: url('../../assets/banner.png'); */

    background-size: cover;
    background-color: #6882f5;
    color: #fff;
  }

  .my-container .not-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mobile-img {
    width: 132px;
    height: 132px;
    margin-bottom: 15px;
  }

  .text {
    font-size: 18px;
    /* color: #fff; */
  }

  .user-info .base-info {
    /* height: 131px; */
    padding: 70px 32px 23px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .user-info .left {
    display: flex;
    align-items: center;
  }

  .user-info .left .avatar {
    width: 132px;
    height: 132px;
    margin-right: 13px;
    border: 1px solid #fff;
  }

  .user-info .data-stats {
    display: flex;
  }

  .data-stats .data-item {
    height: 130rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    align-items: center;
  }

  .data-stats .data-item .count,
  .data-stats .data-item .text {
    font-size: 18px;
  }

  .van-grid-item__icon {
    color: #eb5253;
  }</style>